import Vue from 'vue'

// 抹平各浏览器的差异
import 'normalize.css/normalize.css' // A modern alternative to CSS resets

// Element-ui的使用 1：安装 2、导入 导入element-ui 导入css 3、注册 Vue.use(elementui)
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 语言包
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

// 导入全局的css
import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon 导入icon图标
import '@/permission' // permission control 导航守卫

// 自定义指令封装组件导入
import directive from '@/directive'

// 导入打印组件
import PrintNb from 'vue-print-nb'

// 封装全局组件
import Upload from '@/components/lib/Upload.vue'

// 导入语言插件
import i18n from '@/lang'
// 全局混入
// 全局注册:Vue.mixin(混入代码)  局部混入:mixins:[混入代码]
import mixinsCode from '@/utils/mixins'

Vue.mixin(mixinsCode)

// 自定义全局组件声明
Vue.component(Upload.name, Upload)

// 打印组件声明
Vue.use(PrintNb)

// 自定义指令挂载
Object.keys(directive).forEach((item) => {
  Vue.directive(item, directive[item])
})

// 挂载全局bus,定义兄弟组件传值
Vue.prototype.$bus = new Vue()

// 一般情况下，会把自定义指令对象转换成数组去遍历，然后注册全局自定义指令
// 假设有一个对象
/* obj:{
  a:1,
  b:2
}*/
// 1：将对象的key转换成数组    ['a','b']
//   Object.keys(对象)
//   2:将对象的values转换成数组   [1,2]
//   Object.values(对象)
//   3：将对象的key与value都转换成数组 [['a',1],['b',2]]
//   Object.entries(对象)

// 因为整个网站都是使用的mock，所以在开发环境与生产环境所有接口都是mock
// 开发环境它使用，mock:webpack配置加入的
// process.env.NODE_ENV：webpack内部的一个命令，能够获取当前的环境
// development：开发环境
// production:生产环境
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// 与i8n语言插件建立联系
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

// // 定义全局自定义指令
// Vue.directive('errorimg', {
//   // 这个生命周期值执行一次，要是后面更新有其他问题也需要解决
//   // 如果图片img没有src，它是不会报错的  也要给它默认的图片
//   inserted(dom, obj) {
//     // 当你的图片有src，就使用你的src，没有就使用默认图片
//     // 如果图片加载有问题，就指定头像
//     dom.src = dom.src || boj.vue || require('@/assets/common/bigUserHeader.png')
//     // 图片出错了，这是一个监听函数，执行一次后回一直存在
//     dom.onerror = () => {
//       // 图片加载出错会执行
//       // 如果出错了，就给他一个默认图片
//       dom.src = obj.value || require('@/assets/common/bigUserHeader.png')
//     }
//   },
//   // 当指令所在组件有更新且更新完成后执行
//   componentUpdated(dom) {
//     dom.src =
//       dom.src || obj.value || require('@/assets/common/bigUserHeader.png')
//   }
// })

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: (h) => h(App)
})
